import React from "react";
import Control from "./Control";
import Demo from './Demo'
import ToDoList from "./ToDoList";
import User from './User'
import './App.css';
//引入图片
import a from './image/s1.jpg'
const b = require('./image/s2.jpg').default//弃用


const str = '<h1>XIAOSONGLAOSHI</h1>';
const App = () =>{
    return (
        <div className="app">
            <User username='song' age={16} work='ME BEFORE YOU'/>
            <User username='liu' age={15} />
        <div>
            <br/>
            <div 
            style={{width:200,color:"#3e6bff",height:'150px'}}    
            dangerouslySetInnerHTML={ {__html:str} }></div>
            {/* //{变量{对象}} */}
            <div>{str}</div>
            <div>
                <img src={a}/>
                <img src={b}/>
                {/* //require可以放在行内 */}
                <img src={require('./image/s3.jpg').default}/>
            </div>
        {/* <ToDoList /> */}
        {/* <Control /> */}
        {/* <Demo /> */}
    </div>
    </div>);
}



export default App;